<template>
  <div class="demo">
    <div class="demo-title">基本</div>
    <div class="demo-content">
      <Typography>
        <Typography.Title>Introduction</Typography.Title>
        <Typography.Paragraph>
          <Typography.Text strong>SSC+Design</Typography.Text> is a design system developed by SSC for
          products and digital experiences. The system is based on
          <Typography.Text strong>SSC+Design</Typography.Text> language and consists of working code,
          design tools and resources, and human-machine interface guidelines.
        </Typography.Paragraph>
        <Typography.Title :level="2">Overview of SSC+Design</Typography.Title>
        <Typography.Paragraph>
          The SSC+design system is a collection of pre built, reusable assets (components, patterns,
          guidelines, and code) that allow users to build a consistent digital experience faster. By
          using pre built and generic assets of SSC+design systems, the time spent on team design and
          build is minimized. We can spend time customizing products to meet specific customer use
          cases without the need to rebuild basic elements.
        </Typography.Paragraph>
        <Typography.Paragraph>
          The SSC+design system mainly serves the experience design and technical implementation of
          products under Yunhai Chain. This design system combines the brand tone of Yunhai Chain to
          create beautiful, complex, natural, and intuitive designs.
        </Typography.Paragraph>
        <Typography.Paragraph>
          <ul>
            <li>
              <Typography.Link href="/design/introduce">
                Design Language - Humanistic Digital Experience Services
              </Typography.Link>
            </li>
          </ul>
        </Typography.Paragraph>
        <Typography.Paragraph>
          Press
          <Typography.Text keyboard>Esc</Typography.Text>
          to exit...
        </Typography.Paragraph>
        <Divider />
        <Typography.Title>介绍</Typography.Title>
        <Typography.Paragraph>
          SSC+ Design 是 SSC 针对产品和数字体验的设计系统。该系统以 SSC+
          设计语言为基础，由工作代码、设计工具和资源以及人机界面指南组成。
        </Typography.Paragraph>
        <Typography.Title :level="2">SSC+ Design 的概述</Typography.Title>
        <Typography.Paragraph>
          SSC+ 设计系统是预构建的、可重用的资产（<Typography.Text code>组件</Typography.Text
          >、<Typography.Text code>模式</Typography.Text>、<Typography.Text code>指南</Typography.Text
          >和<Typography.Text code>代码</Typography.Text
          >）的集合，允许用户更快地构建一致的数字体验。通过使用 SSC+
          设计系统的预构建和通用资产，团队设计和构建所花费的时间被最小化。我们可以花时间定制产品来满足特定的客户用例，而不需要重新构建基本元素。
        </Typography.Paragraph>
        <Typography.Paragraph>
          SSC+
          设计系统主要服务于云海链旗下产品的体验设计和技术实现。该设计系统结合云海链品牌调性，创造出美丽、复杂、自然和直观的设计。
        </Typography.Paragraph>
        <Typography.Paragraph>
          <ul>
            <li>
              <Typography.Link href="/design/introduce">
                设计语言 - 以人为本的数字体验服务
              </Typography.Link>
            </li>
          </ul>
        </Typography.Paragraph>
        <Typography.Paragraph>
          <blockquote>{{ blockContent }}</blockquote>
          <pre>{{ blockContent }}</pre>
        </Typography.Paragraph>
        <Typography.Paragraph>
          按
          <Typography.Text keyboard>Esc</Typography.Text>
          键退出阅读……
        </Typography.Paragraph>
      </Typography>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Divider from '@sscd/divider';
  import Typography from '@sscd/typography';
  const blockContent = `打造植根于以人为本的设计、高质量设计标准和令人愉悦的用户体验，确保我们为用户提供一致性和卓越性，并在整个产品线中打造一个深受人们喜爱的品牌。`;
</script>
